﻿<%@ Page Title="Hình Ảnh" Language="C#" MasterPageFile="MasterPage.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="contentNoiDung" runat="server">
    <style type="text/css">
        html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
*{outline:none;}
html{
min-height: 100%; /*Sets the min height to the
  height of the viewport.*/
 width: 100%;
 height: 100%; /*Effectively, this is min height
  for IE5+/Win, since IE wrongly expands
  an element to enclose its content.
  This mis-behavior screws up modern
  browsers*/
 margin: 0;
 padding: 0;
 }

/* thumbnail list */

	
	
	
		
	
	
/* // thumbnail list */

#header{
	height:100px;
}

 #push {
	height: 43px; /* .push must be the same height as .footer */
    padding-top:10px;
}
#wrapper1{
    width:979px;
    min-height: 96%;
	height: auto !important;
	height: 96%;
	text-align:left;
    margin: 0 auto -30px;
    padding:0 10px 0px 10px;
}

.clearfix{
	clear:both;
	float:none;
}
#bigPic{
	width:940px;
	height:300px;
	padding:1px;
	border:1px solid #CCC;
	background-color:#FFF;
	margin-bottom:10px;
}
#bigPic img{
	position:absolute;
	display:none;
}
ul#thumbs li.active{
	border:2px solid #000;	
	background:#fff;
	padding:2px;
}
ul#thumbs, ul#thumbs li{
	margin:0;
	padding:0;
	list-style:none;
}
	
ul#thumbs li{
	float:left;
	margin-right:7px;
	margin-bottom:5px;
	border:1px solid #CCC;	
	padding:3px;
	cursor:pointer;
}
ul#thumbs img{
	float:left;
	width:80px;
	height:80px;
	line-height:80px;
	overflow:hidden;
	position:relative;
	z-index:1;		
}

    </style>

    <div id='wrapper1'>
		<div id='header'></div>
		<div id='body'>
			<div id="bigPic">
				<img src="assets/slide/imgs/1.jpg" alt="" />
				<img src="assets/slide/imgs/2.jpg" alt="" />
				<img src="assets/slide/imgs/3.jpg" alt="" />
				<img src="assets/slide/imgs/4.jpg" alt="" />
				<img src="assets/slide/imgs/5.jpg" alt="" />
				<img src="assets/slide/imgs/6.jpg" alt="" />
				<img src="assets/slide/imgs/7.jpg" alt="" />
				<img src="assets/slide/imgs/8.jpg" alt="" />
				<img src="assets/slide/imgs/9.jpg" alt="" />
				<img src="assets/slide/imgs/10.jpg" alt="" />
			</div>
			
			
			<ul id="thumbs">
				<li class='active' rel='1'><img src="assets/slide/imgs/1_thumb.jpg" alt="" /></li>
				<li rel='2'><img src="assets/slide/imgs/3_thumb.jpg" alt="" /></li>
				<li rel='3'><img src="assets/slide/imgs/4_thumb.jpg" alt="" /></li>
				<li rel='4'><img src="assets/slide/imgs/5_thumb.jpg" alt="" /></li>
				<li rel='5'><img src="assets/slide/imgs/6_thumb.jpg" alt="" /></li>
				<li rel='6'><img src="assets/slide/imgs/7_thumb.jpg" alt="" /></li>
				<li rel='7'><img src="assets/slide/imgs/8_thumb.jpg" alt="" /></li>
				<li rel='8'><img src="assets/slide/imgs/9_thumb.jpg" alt="" /></li>
				<li rel='9'><img src="assets/slide/imgs/10_thumb.jpg" alt="" /></li>
				<li rel='10'><img src="assets/slide/imgs/2_thumb.jpg" alt="" /></li>
			</ul>
		
		</div>
		<div class='clearfix'></div>
		<div id='push'></div>
	</div>

	<script type="text/javascript">
	var currentImage;
    var currentIndex = -1;
    var interval;
    function showImage(index){
        if(index < $('#bigPic img').length) {
            var indexImage = $('#bigPic img')[index];
            if(currentImage){   
            	if(currentImage != indexImage ){
                    $(currentImage).css('z-index',2);
                    clearTimeout(myTimer);
                    $(currentImage).fadeOut(250, function() {
					    myTimer = setTimeout("showNext()", 3000);
                        $(this).css({ 'display': 'none', 'z-index': 1 });
                    });
                }
            }
            $(indexImage).css({'display':'block', 'opacity':1});
            currentImage = indexImage;
            currentIndex = index;
            $('#thumbs li').removeClass('active');
            $($('#thumbs li')[index]).addClass('active');
        }
    }
    
    function showNext(){
        var len = $('#bigPic img').length;
        var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
        showImage(next);
    }
    
    var myTimer;
    
    $(document).ready(function() {
	    myTimer = setTimeout("showNext()", 3000);
		showNext(); //loads first image
        $('#thumbs li').bind('click',function(e){
        	var count = $(this).attr('rel');
        	showImage(parseInt(count)-1);
        });
	});
    
	
	</script>	
</asp:Content>